<template>
  <div>
    <h3>当前最新的count值为：{{ count }}</h3>
    <p>{{ showNum }}</p>
    <button @click="btnHandler1">-1</button>
    <button @click="btnHandler2">-3</button>
    <button @click="btnHandler3">-1 Async</button>
    <button @click="btnHandler4">-3 Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

// 这里用的是mapState函数挂载全局共享数据到当前Vue实例中的computed计算属性中
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub']),
    ...mapActions(['subAsync']),
    btnHandler1 () {
      this.sub(1)
    },
    btnHandler2 () {
      this.sub(3)
    },
    btnHandler3 () {
      this.subAsync(1)
    },
    btnHandler4 () {
      this.subAsync(3)
    }
  }
}
</script>
